<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<link type="text/css" href="/share/css/reset.css" rel="stylesheet" />
	<script type="text/javascript" src="/share/js/jquery.min.js"></script>
	<script type="text/javascript" src="/share/js/zepto.min.js"></script>
</head>
<body>
	<div id="module_html" class="mid_slider_1">
		<div class="swipe">
			<ul id="slider">
				<li><a href="#"><img src="/module/2/images/banner02.jpg" /></a></li>
				<li><a href="#"><img src="/module/2/images/banner03.jpg" /></a></li>
				<li><a href="#"><img src="/module/2/images/banner04.jpg" /></a></li>
				<li><a href="#"><img src="/module/2/images/banner05.jpg" /></a></li>
			</ul>
			<div id="pagenavi"></div>
		</div>
	</div>

	<div id="module_css">
		<style type="text/css">
			.mid_slider_1{width:100%;overflow:hidden;background:#FFF;}
			.mid_slider_1 .swipe ul,.mid_slider_1 .swipe li{margin:0;padding:0;list-style:none;overflow:hidden;}
			.mid_slider_1 .swipe img{width:100%;height:auto;display:block;}
			.mid_slider_1 .swipe{overflow:hidden;position:relative;}
			.mid_slider_1 .swipe ul{-webkit-transition:left 800ms ease-in 0;-moz-transition:left 800ms ease-in 0;-o-transition:left 800ms ease-in 0;-ms-transition:left 800ms ease-in 0;transition:left 800ms ease-in 0;}
			.mid_slider_1 .swipe #pagenavi{position:absolute;left:0;bottom:7px;text-align:center;width:100%;}
			.mid_slider_1 .swipe #pagenavi a{width:6px;height:6px;line-height:99em;background:#999;border-radius:50%;margin:0 3px;overflow:hidden;cursor:pointer;display:inline-block;*display:inline;*zoom:1;}
			.mid_slider_1 .swipe #pagenavi a.active{background:#FFF;}
		</style>

		<script type="text/javascript" src="/module/2/js/mid_slider_1.js"></script>
		<script type="text/javascript">
			$.banner = (function(){
				var num = 0;
				num = $("#slider li").length;
				var html = "";
				html = "<a href='javascript:void(0);' {c}>{i}</a>";
				var lasthtml, thtml;
				lasthtml = "";

				for(var i = 0; i < num; i++){
					thtml = "";
					if (i == 0) {
						thtml = html.replace("{c}", "class='active' ");
					} else {
						thtml = html.replace("{c}", "");
					}
					thtml = thtml.replace("{i}", i);
					lasthtml += thtml;
				};

				$("#pagenavi").html(lasthtml);
				var active = 0,
						as = $('#pagenavi a');

				for (var i = 0; i < as.length; i++) {
					(function() {
						var j = i;
						as[i].onclick = function() {
							t2.slide(j);
							return false;
						}
					})();

				}

				var t2 = new TouchSlider({
					id: 'slider',
					speed: 600,
					timeout: 6000,
					before: function(index){
						as[active].className = '';
						active = index;
						as[active].className = 'active';
					}
				});

				setTimeout(function(){
					t2.resize();
				},100);

			});
			$(function(){
				$.banner();
			});
		</script>
	</div>
</body>
</html>